<template>
  <div class="pay-canceled-page">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="支付已取消"
        left-arrow
        @click-left="handleGoHome"
        class="canceled-nav"
    />

    <!-- 主体内容 -->
    <div class="canceled-container">
      <!-- 成功图标 -->
      <div class="canceled-icon">
        <van-icon name="close-circle" color="#ff4d4f" size="70" />
      </div>

      <!-- 结果标题 -->
      <div class="canceled-title">支付已取消</div>
      <div class="canceled-desc">您已成功取消该订单的支付</div>

      <!-- 订单信息 -->
      <div class="order-card">
        <div class="order-item">
          <span class="order-label">订单编号：</span>
          <span class="order-value">{{ orderNumber }}</span>
        </div>
        <div class="order-item">
          <span class="order-label">商品名称：</span>
          <span class="order-value">{{ itemTitle }}</span>
        </div>
        <div class="order-item">
          <span class="order-label">订单状态：</span>
          <span class="order-value status">待支付</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="canceled-btns">
        <van-button
            class="btn-order-list"
            type="primary"
            @click="handleGoToOrderList"
        >
          查看我的订单
        </van-button>
        <van-button
            class="btn-home"
            type="default"
            @click="handleGoHome"
        >
          返回首页
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 路由实例
const route = useRoute();
const router = useRouter();

// 接收从取消页携带的订单信息
const orderNumber = ref(route.query.orderNumber as string || '未知订单');
const itemTitle = ref(route.query.itemTitle as string || '未知商品');

// 返回首页
const handleGoHome = () => {
  router.push({ path: '/' });
};

// 跳转到订单列表页
const handleGoToOrderList = () => {
  router.push({ path: '/my/orders', query: { tab: 'pending' } }); // 可定位到“待支付”标签
};
</script>

<style scoped>
/* 页面整体样式 */
.pay-canceled-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* 顶部导航 */
.canceled-nav {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 主体容器 */
.canceled-container {
  width: 92%;
  margin: 0 auto;
  padding-top: 60px;
  text-align: center;
}

/* 取消图标 */
.canceled-icon {
  margin-bottom: 24px;
}

/* 结果标题与说明 */
.canceled-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.canceled-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 36px;
}

/* 订单信息卡片 */
.order-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 36px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.order-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 14px;
}
.order-item:last-child {
  margin-bottom: 0;
}
.order-label {
  color: #666;
}
.order-value {
  color: #333;
}
/* 状态样式 */
.order-value.status {
  color: #ff4d4f;
}

/* 操作按钮组 */
.canceled-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-order-list, .btn-home {
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}
.btn-order-list {
  background-color: #1989fa;
  color: #fff;
}
.btn-home {
  border: 1px solid #ddd;
  color: #333;
}
</style>